<template>
  <div style="padding-top: 5px;position: relative">
    <ul style="list-style-type: square;position: absolute;">
      <li style="text-align: left;margin: 0 ;"><span><h3 style="display: inline;">热门推荐</h3><br></span></li>
      <li style="text-align: left;margin: 0 ;list-style-type:none"><span><h6 style="display: inline;"> 上海 北京 成都 广州</h6><br></span></li>
      <hr width="35%" color="#F0F0F0" >
      <li style="text-align: left;margin: 0 ;"><span><h3 style="display: inline;" @click = "router.push('/ShanghaiTravelGuide')">上海</h3><br></span></li>
      <li style="text-align: left;margin: 0 ;list-style-type:none"><span><h6 style="display: inline">外滩 上海迪士尼 </h6><br></span></li>
      <hr width="35%"  color="#F0F0F0">
      <li style="text-align: left;margin: 0 ;"><span><h3 style="display: inline;">海南</h3><br></span></li>
      <li style="text-align: left;margin: 0 ;list-style-type:none"><span><h6 style="display: inline">三亚  万宁 三沙</h6><br></span></li>
      <hr width="35%"  color="#F0F0F0">
      <li style="text-align: left;margin: 0 ;"><span><h3 style="display: inline;">四川</h3><br></span></li>
      <li style="text-align: left;margin: 0 ;list-style-type:none"><span><h6 style="display: inline">成都 乐山 稻城亚丁 九寨沟 </h6><br></span></li>
      <hr width="35%" color="#F0F0F0">
      <li style="text-align: left;margin: 0 ;"><span><h3 style="display: inline;">山东</h3><br></span></li>
      <li style="text-align: left;margin: 0 ;list-style-type:none"><span><h6 style="display: inline">青岛 威海 泰山 日照</h6><br></span></li>
      <hr width="35%" color="#F0F0F0">
      <li style="text-align: left;margin: 0 ;"><span><h3 style="display: inline;">湖南</h3><br></span></li>
      <li style="text-align: left;margin: 0 ;list-style-type:none"><span><h6 style="display: inline">长沙 张家界 凤凰古城 岳阳</h6><br></span></li>
      <hr width="35%" color="#F0F0F0">
      <li style="text-align: left;margin: 0 ;"><span><h3 style="display: inline;">云南</h3><br></span></li>
      <li style="text-align: left;margin: 0 ;list-style-type:none"><span><h6 style="display: inline">丽江 昆明 大理寺 香格里拉</h6><br></span></li>
      <hr width="35%" color="#F0F0F0">
      <li style="text-align: left;margin: 0;"><span><h3 style="display: inline;">新疆</h3><br></span></li>
      <li style="text-align: left;margin: 0;list-style-type:none"><span><h6 style="display: inline">赛里木湖 吐鲁番 哈密</h6><br></span></li>
      <hr width="35%" color="#F0F0F0">
      <li style="text-align: left;margin: 0 ;"><span><h3 style="display: inline;">内蒙古</h3><br></span></li>
      <li style="text-align: left;margin: 0 ;list-style-type:none"><span><h6 style="display: inline">呼和浩特 呼伦贝尔 乌兰察布</h6><br></span></li>
      <hr width="35%" color="#F0F0F0">
      <li style="text-align: left;margin: 0 ;"><span><h3 style="display: inline;">西藏</h3><br></span></li>
      <li style="text-align: left;margin: 0;list-style-type:none"><span><h6 style="display: inline">拉萨 乌布</h6><br></span></li>
      <hr width="35%" color="#F0F0F0">
    </ul>
<!--    宝藏村落图-->
    <div style="display: flex;justify-content: center;padding-top: 25px" class="common-layout" >
      <el-carousel style="width: 60%;margin:0;position: absolute;float: left;display: block">
        <el-carousel-item v-for="p in bannerArr">
          <img :src="p" style="width:100%;height:100%">
        </el-carousel-item>
      </el-carousel>
    </div>
<!--三个大图-->
    <el-row :gutter="0" style="margin:350px 0 0 300px;width: 60%">
      <el-col :span="8" v-for="p in productArr" style="margin: 10px 0;">
        <img :src="p.url" style="width:95%; border-radius: 10px;">
      </el-col>
    </el-row>


    <hr width="35%" color="#F0F0F0">
    <br>
    <br>
     <span>智慧旅游旗舰店</span>
     <el-row :gutter="0">
      <el-col :span="6" v-for="(p,index) in Arr" style="margin: 10px 0 0 20px;" :key="index">
        <el-card>
          <img :src="p.url" style="width:100%;height: 100%;border-radius: 10px;">
          <b>{{p.title}}</b>
          <div style="margin-top:10px;font-size:15px">{{p.write}}</div>
        </el-card>
      </el-col>
    </el-row>

    <br>
    <span>推荐游记</span>
    <br>
    <el-card style="width:82%;margin-top: 10px" v-for="h in hotelList">
      <el-row>
        <el-col :span="6">
          <img :src="h.url" style="width: 100%; border-radius: 10px;">
        </el-col>
        <el-col :span="16">
          <span style="font-size:20px;margin: 10px">{{h.title}}</span>
          <br>
          <br>
          <div style="color:gray;font-size: 13px;margin: 10px">{{h.desc}}</div>
          <div style="margin: 130px 60px 5px 20px;color: gray"><el-icon><Picture /></el-icon>{{h.one}}
                                                               <el-icon><Comment /></el-icon>{{h.two}}
                                                              <el-icon><View /></el-icon>{{h.three}}
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script setup>
import {ref} from "vue";
import router from "@/router";

//主图数组
const bannerArr = ref(["/imgs/u.jpg"]);
const productArr = ref([
  {url: "/imgs/a4.jpg"},
  {url: "/imgs/k.jpg"},
  {url: "/imgs/l.jpg"}]);
//智慧旗舰店数组
const Arr = ref([
  {title: "心游嘉兴体验馆", url: "/imgs/x.jpg",write:"红船启梦,心游嘉兴"},
  {title: "文成旅游旗舰店", url: "/imgs/o.jpg",write: "伯温故里,天然文成"}]);
//推荐游记数组
const hotelList = ref([
  {title: "【环洲苏州河】除了《八佰》和四行仓库，还有很多值得打卡的地儿", url: "/imgs/v.jpg",desc:"一部抗日电影《八佰》，让苏州河畔默默伫立的四行仓库，重回大众视野，成了眼下热门的打卡地，连带着苏州河",one: 335,two:62,three:79509},
  {title: "【魔都暴走记】你是我脑海中鲜明的记忆,做一场与上海有关的白日梦", url: "/imgs/w.jpg",desc:"写在前面与朋友前几个月约好的 上海 之旅，一直因各种忙碌与天气原因而拖延至今。这不",one :340,two: 78,three: 477944},
  {title: "重庆在逃公主在上海迪士尼度假区3日深度游 附上海吃住行购集合",  url: "/imgs/b1.jpg",desc:"是的，我又去迪士尼了！继香港，美国（洛杉矶），日本东京以后，这次，我来到了上海迪士尼",one: 334,two:66,three: 3674},
  {title: "放肆嗨玩,上海欢乐谷,玛雅公园全体验,Happy一夏天| 上海",  url: "/imgs/b2.jpg",desc:"临时的毕业旅行“涛涛，毕业出不出去耍？”“好啊，去哪里？”“你想去哪里？”“我想玩点",one: 223,two:77,three: 7490234},
  {title: "繁华深处有自在！四条“小众”线路探寻魔都上海之“魔”" , url: "/imgs/b3.jpg",desc:"魔都上海，一个不管你去了几次，都还想再去一次的地方。没有原因，没有理由，就是一种缘分",one: 230,two:78,three: 3733},
  {title: "【老挝泰国旅行】2020新年第一场旅行：老挝泰美奇境之旅", url: "/imgs/b4.jpg",desc:"魔都上海，一个不管你去了几次，都还想再去一次的地方。没有原因，没有理由，就是一种缘分",one: 390,two:77,three: 36345},
  {title: "走入松江，不一样的上海郊野风情（2日游完全攻略）", url: "/imgs/b5.jpg",desc:"魔都上海，一个不管你去了几次，都还想再去一次的地方。没有原因，没有理由，就是一种缘分",one: 379,two:55,three: 2639},
  {title: "漫步杨浦滨江带，感受百年工业沧桑", url: "/imgs/b6.jpg",desc:"前言对于东南亚的神佛，我满怀敬仰，每一次出行都是朝圣之旅！杭州的冬来得格外湿冷一些，",one: 360,two:78,three: 36843},
]);

</script>


<style scoped>





</style>